Saltar al contenido principal

Compilar imágenes target en MindAR

Fecha de creación del post: 13 de Noviembre de 2025
Autor: Abraham García

Introducción​

En MindAR, es necesario crear un documento compilado que contenga la o las imágenes que serán utilizadas como target para mostrar el contenido aumentado en la aplicación.

Para generar este target se requiere usar el compilador oficial, disponible en el siguiente enlace:

👉 https://hiukim.github.io/mind-ar-js-doc/tools/compile/

En esta herramienta es necesario cargar la o las imágenes que se utilizarán como marcadores.
Es altamente recomendable utilizar un solo archivo para todos los marcadores que se emplearán, ya que MindAR es capaz de diferenciarlos automáticamente durante la detección.

El tiempo de compilación dependerá del peso y la cantidad de imágenes cargadas.

Características de un buen target​

1. Complejidad​

Mientras más compleja sea la imagen (tonos, formas, texturas, puntos, líneas, figuras, colores), mejor será el target.
Las imágenes con muchos cambios y contrastes favorecen la detección.

2. Evitar patrones repetitivos o simétricos​

Debe evitarse el uso de imágenes con patrones repetitivos, ya que el algoritmo necesita elementos únicos y distinguibles.

3. Sin espacios vacíos​

Los espacios vacíos o áreas con un solo color disminuyen la calidad del target.
Se recomienda que toda el área tenga variaciones constantes de color.

4. Alto contraste​

Cuantos más contrastes existan en la imagen, mayor será la calidad del marcador.
Los cambios abruptos entre tonos ayudan considerablemente al algoritmo.

Cosas irrelevantes para un marcador​

El color​

La mayoría de los procesadores de imagen convierten las imágenes a escala de grises antes del análisis, por lo que el color no influye en la detección.

Los gradientes​

Los gradientes generan áreas muy similares entre sí, lo que no aporta buenos puntos de referencia para un marcador robusto.

Recomendaciones adicionales (Fix the problems)​

Si después de compilar descubres que tu imagen no funciona bien como target, no te frustres. A menudo es fácil corregirla. Aquí algunos consejos:

  • Si la imagen es muy simple, considera agregar un fondo que incremente su complejidad.
  • Si la imagen tiene espacios vacíos en los bordes o una relación de aspecto poco útil, prueba recortar el área central. No siempre es necesario rastrear toda la imagen.
  • Si nada funciona, es posible que debas rediseñar el marcador.
    La ventaja es que ahora ya conoces las características necesarias para crear un buen target.

Ejemplos​

En las siguientes imagenes encontraremos a la izquierda una imagen poco favorable para ser considerada para target. Ala derecha su contraparte.

Contenido de la imagen​

Contenido de la imagen

Patrones dentro de la imagen​

Texto alternativo

Contraste​

Texto alternativo

Uso del tracker​

Dentro de la escena de A-Frame se debe colocar el siguiente elemento tantas veces como la cantidad de imágenes target que se tengan.
La diferencia entre cada uno se define utilizando el atributo mindar-image-target, en el cual se especifica el valor de targetIndex: 0.
Este índice debe comenzar en cero.

En caso de utilizar contenido AR, este debe colocarse dentro del elemento <a-entity>.

<a-entity mindar-image-target="targetIndex: 0"></a-entity>

Control de eventos del tracker​

Para controlar los eventos del tracker, puede utilizarse la siguiente referencia:
👉 https://hiukim.github.io/mind-ar-js-doc/examples/events-handling

Ejemplo en React​

En React, es necesario utilizar una referencia (ref) para cada elemento.
A continuación se muestra un ejemplo:

const TrackerItem = ({ index }) => {
  const ref = useRef();
  const { updateProduct } = useContent();

  useEffect(() => {
    if (!ref.current) return;

    const handleChange = () => {
      console.log(index);
      updateProduct(index);
    };

    const node = ref.current;

    node.addEventListener("targetFound", handleChange);

    return () => node.removeEventListener("targetFound", handleChange);
  }, [index, updateProduct]);

  return (
    <a-entity
      ref={ref}
      mindar-image-target={`targetIndex: ${index}`}
    ></a-entity>
  );
};

Recursos útiles​